<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<title>科转中心配置</title>
	<link rel="stylesheet" href="assets/libs/layui/css/layui.css" />
	<style>
		@media screen and (min-width: 800px) {
			.layui-form-label{
				width: 86px !important;
			}
		}

		.content_box{
			max-width: 960px;
			display: flex;
			justify-content: center
		}

		.login-header {
			color: rgba(0, 0, 0, .85) !important;
			padding: 5% 0;
			text-align: center;
		}

		.buttongroup {
			display: flex;
			margin-top: 10%;
		}

		.buttongroup button {
			width: 100%;
			height: 45px;
		}

		.main_content_wrap {
			margin: 20px 0px;
		}

	</style>
</head>

<body>
	<div class="body">
		<div class="login-header">
			<h2 style="font-weight: 400;letter-spacing: 3px; font-size: 30px" id="show_title">科转中心</h2>
		</div>
		<div class="layui-fluid content_box">
			<div class="main_content_wrap">
				<form lay-filter="modifyForm" class="layui-form model-form">
					<div class="layui-form-item">
						<label class="layui-form-label">科转中心</label>
						<div class="layui-input-inline">
							<input type="radio" name="type" lay-filter="opt_state"  title="人员" value="user" checked/>
							<input type="radio" name="type" lay-filter="opt_state"  title="部门" value="department"/>
						</div>
					</div>
					<div class="layui-form-item" id="user">
						<label class="layui-form-label">人员</label>
						<div class="layui-input-inline">
							<button type="button" id="selUser" class="layui-btn">选择</button>
						</div>
					</div>
					<div class="layui-form-item" id="department" style="display: none">
						<label class="layui-form-label">部门</label>
						<div class="layui-input-inline">
							<button type="button" id="selDepartment" class="layui-btn">选择</button>
						</div>
					</div>
					<div class="layui-form-item">
						<div id="container">
						</div>
					</div>
					<input hidden name="ids" id="ids"/>
					<div class="layui-form-item text-center buttongroup">
						<button type="button" lay-filter="modifyFormSubmit" lay-submit
							class="layui-btn site-demo-active">提交</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
	<script type="text/javascript" src="assets/js/config.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

	<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>
	<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
	<script>
		layui.config({
			base: 'assets/module/'
		}).use(['jquery', 'form', 'layer'], function () {
			var $ = layui.jquery;
			var form = layui.form;
			var layer = layui.layer;

			let userMsg = localStorage.getItem("userMsg");
			var content = {};

			form.render();
			$.ajax({
				type: 'get',
				url: serverUrl + 'Config/getConfigInfo',
				data: {
					'name': 'TTC'
				},
				dataType: "json",
				success: function (res) {
					if (res.success === true) {
						content = res.obj.val;
					}
				},
				error: function (error) {
					console.log(error);
				}
			})

			form.on('radio(opt_state)', function(data){
				$("#container").empty()
				$("#ids").val('')
				if(data.value == 'user'){
					$('#user').show();
					$('#department').hide();
				}else{
					$('#user').hide();
					$('#department').show();
				}
				form.render();
			});

			$('#selUser').on('click', function () {
				console.log(content.ids)
				var hasUser = [];
				if(content.ids  && content.type=='user'){
					hasUser = content.ids.split(',');
				}
				console.log(hasUser)
				selectEnterpriseContact('user','multi',[],hasUser,
						function (res) {
							$('#ids').val(res.ids.join(','))
							const openidList = res.ids;
							for (const openid of openidList) {
								const element = document.createElement('ww-open-data')
								// element.setAttribute('class', 'opendata-show')
								element.setAttribute('type', 'userName')
								element.setAttribute('openid', openid)
								container.appendChild(element)
							}
							WWOpenData.bindAll(document.querySelectorAll('ww-open-data'))
							form.render();
						},
						function (err) {
							console.log('选择失败：', err)
						}
				)
			});

			$('#selDepartment').on('click', function () {
				var hasUser = [];
				if(content.ids  && content.type=='department'){
					hasUser = content.ids.split(',');
				}
				selectEnterpriseContact('department','multi',hasUser,[],
						function (res) {
							$('#ids').val(res.ids.join(','))
							const openidList = res.ids;
							for (const openid of openidList) {
								const element = document.createElement('ww-open-data')
								// element.setAttribute('class', 'opendata-show')
								element.setAttribute('type', 'departmentName')
								element.setAttribute('openid', openid)
								container.appendChild(element)
							}
							WWOpenData.bindAll(document.querySelectorAll('ww-open-data'))
							form.render();
						},
						function (err) {
							console.log('选择失败：', err)
						}
				)
			});


			//监听提交
			form.on('submit(modifyFormSubmit)',function(data){
				let params = {}
				params.val = JSON.stringify(data.field);
				params.name = 'TTC'
				let newobj = typeChange(params);
				$.post(serverUrl+'Config/modifyConfigInfo.html', newobj, function (res) {
					if (res.success === true) {
						layer.msg('提交成功', {icon: 1, time: 300}, function () {
						});
					} else {
						layer.msg(res.msg, {icon: 2});
					}
				}, 'json');
			});

		});
	</script>
</body>

</html>